<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>new-king</h1>
    <input type="text" placeholder="尊姓大名" id="myInput"/>
    
    <script>
       //判断是否是对象
       function isObject(value){
          return typeof value === 'object' && value !== null
       }
      /**
       * 创建响应式数据
       * @param [object]: 普通对象
       * @return [Proxy]: 代理对象
       */
      function reactive(obj){
        if(!isObject(obj)) return;
        
        return new Proxy(obj,{
          get(target,key){
            return target[key]
          },
          set(target,key,value){
            target[key] = value;
            return true;
          }
        })
      }
        
        const dom_h1 = document.getElementsByTagName('h1')[0];
        const data = reactive( { name : 'xiaohong' } )
        // console.log(data.name);
        // data.name = 'newking';
        // console.log(data.name);
        
        myInput.addEventListener("keyup",(event) => {
            data.name = myInput.value;
            dom_h1.innerHTML = data.name;
        })

        
    </script>
  </body>
</html>